<template>
    <div class="add_pane">
        <div class="search_pane">
            <el-input v-model="username" placeholder="请输入用户账号" clearable>
                <template #append>
                    <el-button :icon="Search" @click="searchUser"/>
                </template>
            </el-input>
        </div>
        <div v-show="isShow">
            <el-descriptions title="朋友搜索详情" border>
                <el-descriptions-item
                :rowspan="1"
                :width="140"
                label="Photo"
                align="center"
                >
                <el-image
                    style="width: 100px; height: 100px"
                    src="/img/user.png"
                />
                </el-descriptions-item>
                <el-descriptions-item label="账号">{{ username }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ phone }}</el-descriptions-item>
                <el-descriptions-item label="用户id">
                    {{ userId }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>
<script setup>
import { defineComponent,reactive, ref, unref, h, onMounted, nextTick, computed, getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue';
import { userApi } from '@/api/apis/user';

// 定义事件让子组件调用父组件
const emit = defineEmits(['data-request']);

const username=ref('');
const phone=ref('');
const userId=ref('');
const isShow=ref(false);

//获取朋友用户id
const getFriendUid=()=>{
    return userId.value;
}
//搜索用户
const searchUser=()=>{
    if(!username.value || username.value.trim==''){
         return ElMessage({
            message: '未填写用户账号',
            type: 'warning',
        })
    }
    userApi.searchUser(username.value).then((res)=>{
        console.log(res);
        if(res){
             if (res.hasOwnProperty('code')) {
                if(res.code==1){
                    isShow.value=false;
                    emit('data-request', {code: false});
                }
             }else{
                emit('data-request', {code: true});
                isShow.value=true;
                userId.value=res.uuid;
                username.value=res.username;
                phone.value=res.phone;
             }
        }else{
             isShow.value=false;
             emit('data-request', {code: false});
        }
        console.log(res);
    })
}

// 暴露方法给父组件
defineExpose({
    getFriendUid
})
</script>
<style>
.add_pane{
    .search_pane{
        margin-bottom: 10px;
    }
}

</style>